<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="../G.js"></script>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="../template.js"></script>
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="calendar">
    <div class="title clearfix">
      <div class="titleL"><a></a></div>
      <div class="titleM"></div>
      <div class="titleR"><a></a></div>
    </div>
    <ul class="weekday list-inline"></ul>
    <ul class="date-days list-inline" style=""></ul>
  </div>
<script>
  function Calendar(opt) {
    this.selectDay = $(".date-days");
    this.selectWeekDay = $(".weekday");
    this.selectLast = $(".titleL");
    this.selectWeekTitle = $(".titleM");
    this.selectNext = $(".titleR");
    this.lastContent = "上一月";
    this.nextContent = "下一月";
    if (typeof opt == "object") {
      this.settings = $.extend({
        onLast: true
        , onNext: true
        , displayDate: new Date
        , callback: function (){}
      }, opt);
      this.selectWeekDay.empty();
      this.selectDay.empty();
      this.display(this.settings.displayDate);
      var _self = this;
      var arrTitle;
      if (this.settings.onLast) {
        _self.selectLast.on("click", function () {
          _self.selectWeekDay.empty();
          _self.selectDay.empty();
          arrTitle = (_self.selectWeekTitle.html()).match(/^(\d{4})\D(\d{2})\D$/);
          _self.display(_self.getLastMonth(arrTitle[1] + "-" + arrTitle[2] + "-01"));
          if (typeof _self.settings.callback == "function") {
            _self.settings.callback.call(_self);
          }
        });
        _self.selectDay.on("click", "li", function () {
          _self.settings.callback.call(_self);
        });
      }

      if (this.settings.onNext) {
        _self.selectNext.on("click", function () {
          _self.selectWeekDay.empty();
          _self.selectDay.empty();
          arrTitle = (_self.selectWeekTitle.html()).match(/^(\d{4})\D(\d{2})\D$/);
          _self.display(_self.getNextMonth(arrTitle[1] + "-" + arrTitle[2] + "-01"));
        });
      }
    }
  }
  Calendar.prototype.isValidDate = function (timeString) {
    return !isNaN(new Date(timeString).getTime());
  }
  Calendar.prototype.formatDate = function (timeString) {
    var d;
    if (Object.prototype.toString.call(timeString) == "[object Date]") {
      d = timeString;
    }
    else if (this.isValidDate(timeString)) {
      d = new Date(timeString);
    }
    else {
      return timeString;
    }
    return d.getFullYear() + "-" + Math.abs(d.getMonth() + 1) + "-01";
  }
  Calendar.prototype.getNextMonth = function (timeString) {
    var d, month, nextMonth, year;
    if (this.isValidDate(timeString)) {
      d = new Date(timeString);
      month = d.getMonth() + 1;
      nextMonth = "0" + (month % 12 + 1);
      year = d.getFullYear();
      if (month == 12) {
        year++;
      }
      return year + "-" + nextMonth.substr(-2) + "-01";
    } else {
      return "";
    }
  }
  Calendar.prototype.getLastMonth = function (timeString) {
    var d, lastMonth, year;
    if (this.isValidDate(timeString)) {
      d = new Date(timeString);
      year = d.getFullYear();
      lastMonth = d.getMonth();
      if (lastMonth == 0) {
        lastMonth = 12;
        year--;
      }
      return year + "-" + ("0" + lastMonth).substr(-2) + "-01";
    } else {
      return "";
    }
  }
  Calendar.prototype.getMonthDays = function (timeString) {
    return new Date(new Date(this.getNextMonth(timeString)).getTime() - 86400000).getDate();
  }
  Calendar.prototype.fillFrontDays = function (timeString) {
    var arrDays = [];
    var d, idx, i, days;
    var _self = this;
    if (_self.isValidDate(timeString)) {
      d = new Date(timeString);
      idx = new Date(d.getFullYear() + "-" + ("0" + (d.getMonth() + 1).toString()).substr(-2) + "-01").getDay();
      days = _self.getMonthDays(_self.getLastMonth(timeString));
      for (var i = days - idx + 1; i <= days; i++) {
        arrDays.push(i);
      }
    }
    return arrDays;
  }
  Calendar.prototype.fillBackDays = function (timeString) {
    var arrDays = [];
    var idx, d, i;
    var _self = this;
    if (_self.isValidDate(timeString)) {
      d = new Date(timeString);
      idx = new Date(d.getFullYear() + "-" + ("0" + (d.getMonth() + 1).toString()).substr(-2) + "-" + _self.getMonthDays(timeString)).getDay();
      for (i = 1; i < 7 - idx; i++) {
        arrDays.push(i);
      }
    }
    return arrDays;
  }
  Calendar.prototype.fillDays = function (timeString) {
    var _self = this;
    var i, j, arrFront, arrBack, days;
    if (_self.isValidDate(timeString)) {
      arrFront = _self.fillFrontDays(timeString);
      arrBack = _self.fillBackDays(timeString);
      days = _self.getMonthDays(timeString);
      for (i = 1; i <= days; i++) {
        arrFront.push(i);
      }
      for (j = 1; j <= arrBack.length; j++) {
        arrFront.push(j);
      }
      return arrFront;
    } else {
      return "空数组";
    }
  }

  Calendar.prototype.addDateClass = function (timeString) {
    var _self = this;
    var idxFront, idxCurrentBack, arrDay, i, j;
    arrDay = _self.selectDay.children();
    if (this.isValidDate(timeString)) {
      idxFront = _self.fillFrontDays(timeString).length;
      idxFrontCurrent = idxFront + _self.getMonthDays(timeString);
      for (i = 0; i < idxFront; i++) {
        arrDay.eq(i).attr("class", "disabled");
      }
      for (j = idxFrontCurrent; j <= arrDay.length; j++) {
        arrDay.eq(j).attr("class", "disabled");
      }
    }
    return arrDay;
  }

  /**Calendar.prototype.showDays = function (timeString) {
    var _self = this;
    if (_self.isValidDate(timeString)) {
     _self.selectWeekDay.html(
        template(
          "list", {
            list: ["日", "一", "二", "三", "四", "五", "六"]
          })
      );
     _self.selectDay.html(
        template("list", {
          list: _self.fillDays(timeString)
        })
     )
      _self.addDateClass(timeString);
    }
  }**/

  Calendar.prototype.showDays = function (timeString) {
    var _self = this;
    var arrTitle = ["日", "一", "二", "三", "四", "五", "六"];
    var arrDays = _self.fillDays(timeString);
    if (_self.isValidDate(timeString)) {
      for(var i in arrTitle){
        $("<li>").appendTo(_self.selectWeekDay).html(arrTitle[i]);
      }
      for(var j in arrDays){
        $("<li>").appendTo(_self.selectDay).html(arrDays[j]);
      }
      _self.addDateClass(timeString);
    }
  }
  Calendar.prototype.getYearMonth = function (timeString) {
    var _self = this;
    var d;
    if (_self.isValidDate(timeString)) {
      d = new Date(timeString);
      return d.getFullYear() + "年" + ("0" + (d.getMonth() + 1).toString()).substr(-2) + "月";
    }
  }

  Calendar.prototype.display = function (timeString) {
    var _self = this;
    _self.selectLast.children().html(_self.lastContent);
    _self.selectNext.children().html(_self.nextContent);
    _self.selectWeekTitle.html(_self.getYearMonth(timeString));
    _self.showDays(timeString);
  }
</script>
</body>
</html>